<template>
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)

onMounted(() => {
  const chart = echarts.init(chartRef.value)
  
  const option = {
    title: {
      text: '日冻结采集成功率'
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['03-12\n周三', '03-13\n周四', '03-14\n周五', '03-15\n周六', '03-16\n周日', '03-17\n周一', '03-18\n周二']
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        type: 'bar',
        data: [64.7, 61.72, 67.54, 64.17, 71.23, 68.88, 64.92],
        itemStyle: {
          color: '#409EFF'
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}%'
        }
      }
    ]
  }

  chart.setOption(option)

  // 监听窗口大小变化，重绘图表
  window.addEventListener('resize', () => {
    chart.resize()
  })
})
</script>